<template>
    <div class="scene-head-widget" :style="getStyle('head')">
      <div class="logo-time">
        <div class="logo-wrap item" :style="getStyle('picture')">
          <template v-if="!!(optionsInfo?.imageUrl)">
            <img class="logo" :src="pictureResource" alt="企业Logo"/>
          </template>
        </div>

        <template v-if="dataTimeShownInfo">
          <div class="now item" :class="timeClassName(optionsInfo.changePosition)">
            <!-- <div class="time">{{ time }}</div> -->
            <div class="time">{{ timePlus }}</div>

            <div class="sec" v-if="(optionsInfo.dateShow)">
              <!-- <div class="week">{{ getWeekInfo(week) }}</div> -->
              <!-- <div class="date">{{ date }}</div> -->
               <div class="date">{{ datePlus }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="sign-info">
            {{ optionsInfo['signInfo'] }}
          </div>
        </template>

      </div>
      <div class="deptName" :style="getStyle('content')">
        <template v-if="optionsInfo.contentShow">
          <ScrollX :style="getStyle('contentInfo')">{{ optionsInfo.content || '\u00a0' }}</ScrollX>
        </template>
        <div class="describe" v-if="optionsInfo.descriptorShow" :style="getStyle('descriptor')">
          {{ optionsInfo.descriptor }}
        </div>
      </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import emitter from "@/utils/designer/emitter";
import {getWeek, pxToVw} from '@/utils/common';
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";

export default {
  name: "scene-report-head-sivler",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
     datePlus: {
      type: String,
    },
    timePlus: {
      type: String
    }
  },

  data() {
    return {
      week: '',
      mockOpen: false,
      optionsInfo: Object(),
      date: dayjs().format('YYYY年MM月DD日'),
      time: dayjs().format('HH:mm'),

    }
  },

  computed: {
    // 获取报到机的步距
    getSceneReportHead() {
      let info = this.$store.getters['getSceneReportHead'];
      return info 
    },
    //获取LOGO资源
    pictureResource() {
      let {imageUrl = Object()} = (this.optionsInfo);
      if (this.$lodash.isObject(imageUrl)) {
        return imageUrl?.url
      } else {
        return imageUrl
      }
    },


    timeClassName() {
      return function (val) {
        return val ? 'date-time' : 'time-date'
      }
    },


    // 时间日期-显示
    dataTimeShownInfo() {
      let {dataTimeModal = 'dataTime'} = this.optionsInfo;
      return dataTimeModal === 'dataTime'
    },



    // 获取日期
    getWeekInfo() {
      return function (info) {
        return getWeek(info)
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let {
          headHeight,
          backgroundColor,
          fontColor,
          imageHeight,
          imageWidth,
          imageRadius,
          fontSize,
          marginBottom,
          descriptorFontSize,
          descriptorColor,
          descriptorFontWeight,
          descriptorBackground
        } = self.optionsInfo;
        
        let Obj = Object();
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(headHeight));
            Reflect.set(Obj, 'backgroundColor', backgroundColor);
            Reflect.set(Obj, 'color', fontColor);
            return Obj;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(imageHeight));
            Reflect.set(Obj, 'width', pxToVw(imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(imageRadius));
            return Obj;
          case 'content':
            Reflect.set(Obj, 'fontSize', pxToVw(fontSize));
            Reflect.set(Obj, 'color', fontColor);
            return Obj;
          case 'descriptor':
            Reflect.set(Obj, 'fontSize', pxToVw(descriptorFontSize));
            Reflect.set(Obj, 'color', descriptorColor);
            Reflect.set(Obj, 'fontWeight', descriptorFontWeight);
            Reflect.set(Obj, 'background', descriptorBackground);
            return Obj;
          case 'contentInfo':
            Reflect.set(Obj, 'marginBottom', pxToVw(marginBottom));
            return Obj;
        }
      }
    }
  },




  methods: {
   

  },

  destroyed() {
  },

  watch: {
    field: {
      handler: function (val) {
        // let key = val.options.config
        // this.optionsInfo = val.options[key];
        this.optionsInfo = val
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
.scene-head-widget {
  color: #333;
  height: 150px;
  display: flex;
  padding: 28px 0;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  background-color: transparent;
  @include background('design/1-7×2');

  .logo-time {
    display: flex;
    color: white;
    overflow: hidden;
    padding: 0 30px;

    .logo-wrap {
      display: block;
      overflow: hidden;
      align-self: center;

      img {
        height: 90px !important;
        max-width: 100% !important;
        object-fit: contain;
      }
    }

    .item {
      flex: 1;
    }

    .now {
      overflow: hidden;
      line-height: 1;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;

      .time {
        float: right;
        margin-right: 8px;
        font-size: 90px;
        vertical-align: top;
        white-space: nowrap;
        box-sizing: border-box;
        align-self: center;
        padding-right: 20px;
      }

      .sec {
        float: right;
        align-self: center;
        font-size: 32px;

        .week {
          text-align: right;
          white-space: nowrap;
        }

        .date {
          font-weight: 500;
          white-space: nowrap;
          box-sizing: border-box;
          margin-top: 10px;
        }
      }
    }

    .date-time {
      .time {
        order: 1;
        padding-right: 0;
        margin-right: 0;
      }

      .sec {
        margin-right: 8px;
        padding-right: 20px;
      }
    }

    .sign-info {
      font-weight: 500;
      font-size: 80px;
      color: #FFFFFF;
    }
  }

  .deptName {
    width: 100%;
    font-size: 120px;
    color: #FFFFFF;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    @include fontWeight();

    .scrollText {
      margin-bottom: 120px;
    }

    .describe {
      line-height: 1.5;
      font-size: 100px;
      width: 100%;
      font-weight: 460;
      border-radius: 28px 28px 0 0;
      background: rgba(237, 64, 20, 0.9);
      position: absolute;
      bottom: -40px;
      padding-top: 10px;
      padding-bottom: 40px;
    }
  }

}
</style>
